


<template>
  <el-dialog class="dialog-mini" width="500px" title="新增/修改" :visible.sync="visible">
    <el-form :rules="rules" ref="dataForm" :model="temp" label-position="right" label-width="100px">

      <el-form-item size="small" label="物流方式" prop="shippingType">
        <el-radio-group v-model="temp.shippingType">
          <el-radio :label=1>快递物流</el-radio>
          <el-radio :label=4>自提订单</el-radio>
          <el-radio :label=3>虚拟发货</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item size="small" label="物流公司" prop="expressId">
        <el-select class="filter-item" v-model="temp.expressId" filterable placeholder="请选择">
          <el-option v-for="item in  listExpress" :key="item.id" :label="item.expressName" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item size="small" label="物流单号" prop="expressNo">
        <el-input v-model="temp.expressNo" placeholder="请输入物流单号"></el-input>
      </el-form-item>

    </el-form>
    <div slot="footer">
      <el-button size="mini" @click="handleCancel()">取消</el-button>
      <el-button size="mini" type="primary" @click="saveData">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import * as apiOrder from '@/api/order/order'
import * as apiExpress from '@/api/store/storeexpress'

export default {
  data() {
    return {
      // 对话框标题
      title: '订单发货',
      // 标签布局属性
      labelCol: { span: 7 },
      // 输入框布局属性
      wrapperCol: { span: 13 },
      // modal(对话框)是否可见
      visible: false,
      // modal(对话框)确定按钮 loading
      isLoading: false,
      // 当前表单元素
      form: this.$form.createForm(this),
      // 物流公司列表
      listExpress: [],
      // 当前记录
      temp: { shippingType: 1 },
      rules: {
        expressId: [{ required: true, message: '物流公司不能为空', trigger: 'blur' }],
        shippingType: [{ required: true, message: '物流方式不能为空', trigger: 'blur' }],
        expressNo: [{ required: true, message: '物流编号不能为空', trigger: 'blur' }]
      },
    }
  },
  created() {
    // 获取物流公司列表
    this.getListExpress()
  },
  methods: {
    // 显示对话框
    show(record) {
      // 显示窗口
      this.visible = true

      if (record) {
        this.temp = record
        this.temp.shippingType = 1
      }
    },

    getShipingType() {

      //商品状态
      return new Promise((resolve, reject) => {
        apiComm.ListEnum({ name: 'ShippingType' }).then((res) => {
          var arrTemp = res.result
          //去除已开售状态
          arrTemp = arrTemp.filter((item) => item.value != 20)
          this.GoodsStatusList = arrTemp
          resolve()
        })
      })
    },

    // 获取物流公司列表
    getListExpress() {
      this.isLoading = true
      apiExpress.listByWhere()
        .then((res) => (this.listExpress = res.result))
        .finally(() => (this.isLoading = false))
    },
    saveData(e) {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {

          // Object.assign({}, this.temp.id)
          const tempData = {
            orderId: this.temp.id,
            expressId: this.temp.expressId,
            shippingType: this.temp.shippingType,
            expressNo: this.temp.expressNo,
          }

          console.log("11", JSON.stringify(tempData));

          apiOrder.delivery(tempData).then((res) => {
            // 显示成功
            this.$message.success(res.message, 1.5);
            // 关闭对话框事件
            this.handleCancel();
            // 通知父端组件提交完成了
            this.$emit("handleSubmit");
          })
        }
      })
    },
    //  关闭对话框事件
    handleCancel() {
      this.visible = false;
      this.temp = {};
      this.$nextTick(() => {
        this.$forceUpdate();
      });
    },
  }
}
</script>
